<template>
  <div class="g-news-menus">
    <a
      v-for="(menu, index) in menus"
      :key="index"
      @click="goPage(menu)"
      class="g-news-menus-item flex items-center gap-[8px]"
      :class="{ active: activeMenu === menu.name }"
      @mouseenter="hoverMenu=menu.name"
      @mouseleave="hoverMenu=''"
    >
      <GIcon size="16px" :name="(activeMenu === menu.name || hoverMenu === menu.name) ? menu.activeIcon : menu.icon" /> <span class="g-news-menus-item_label">{{ menu.label }}</span>
    </a>
    <!-- 知存杯入口 -->
    <a
      @click="goPage(ZhiCunCup)"
      class="g-news-menus-item flex items-center gap-[8px] activity-btn activity-btn-zhi-cun"
    >
    <img class="g-new-menus-item_icon" src="@/assets/img/icon/zhicun.svg"/> 
    <span class="g-news-menus-item_label">{{ ZhiCunCup.label }}</span>
    </a>
    <!-- 黑客松大赛 -->
    <!-- <a
      @click="goPage(HackathonItem)"
      class="g-news-menus-item flex items-center gap-[8px] activity-btn"
    >
    <img class="g-new-menus-item_icon" src="@/assets/img/icon/heikesong.svg"/> 
    <span class="g-news-menus-item_label">{{ HackathonItem.label }}</span>
    </a> -->
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useRoute,useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n';

const { t } = useI18n()
const route = useRoute()
const router = useRouter()
// const hostPath = (import.meta as any).env.VITE_HOST
const hostFePath = (import.meta as any).env.VITE_HEIKESONG_HOST;
const activeMenu = computed(() => {
  return route.meta.pType as string
})
const hoverMenu = ref('')
const menus = [
  {
    label: t('common.thirdParty'),
    name: 'third-party',
    icon: 'gt-plane-activity',
    activeIcon: 'gt-plane-activity-red',
  },
  {
    label: t('common.news'),
    name: 'news',
    icon: 'gt-plane-blog',
    activeIcon: 'gt-plane-blog-red',
  },
  {
    label: t('common.activity'),
    name: 'activity',
    icon: 'gt-plane-activity',
    activeIcon: 'gt-plane-activity-red',
  }
]
const HackathonItem = {
  label: t('common.hackathon'),
  name: 'hackathon',
  icon: 'gt-plane-activity',
  activeIcon: 'gt-plane-activity-red',
  isHref:`${hostFePath}/hackathon` // 外链地址
}

const ZhiCunCup = {
  label: t('common.zhiCunCup'),
  name: 'zhiCunCup',
  icon: 'gt-plane-activity',
  activeIcon: 'gt-plane-activity-red',
  isHref:`https://gitcode.com/witmem/techtest` // 外链地址
}

//页面跳转
const goPage= (item:any)=>{
  // 判断是不是外链地址
  if(item.isHref){
    window.open(item.isHref)
  }else{
    router.push(`/${item.name}`)
  }
}
</script>

<style lang="scss">
.g-news-menus {
  display: flex;
  gap: 32px;
  font-size: 16px;
  overflow-y: scroll;
  &::-webkit-scrollbar {
    display: none;
  }
  &-item {
    cursor: pointer;
    font-weight: 600;
    width: max-content;
    flex:  0 0 auto;
    &_label {
      color: #3B3E55;
    }
    &.active {
      .g-news-menus-item_label {
        color: #000;
      }
    }
    &:hover {
      .g-news-menus-item_label {
        color: #000;
      }
    }
  }
  @media screen and (max-width: 768px){
    gap: 16px;
  }
  &-item.activity-btn {
    font-size: 14px;
    height: 28px;
    background: linear-gradient(90deg, #0057FF 0%, #DB00FF 100%);
    padding: 0 8px;
    border-radius: 4px;
    .g-new-menus-item_icon {
      width: 20px;
      height: 20px;
    }
    .g-news-menus-item_label {
      color: #ffffff;
    }
    
  }
  &-item.activity-btn-zhi-cun {
    background: linear-gradient(90deg, #3703A7 0%, #5CB7FF 100%);
  }
}
</style>
